<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 系统管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/dictionary' }"> 数据字典</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                <span>字典名称：</span>
                <el-input v-model="query.dicname" placeholder="请输入内容" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">筛选</el-button>
                <el-button icon="el-icon-delete" @click="clear"></el-button>
            </div>
            <el-button type="primary" @click="handleAdd">新增字典</el-button>
            <el-table :data="tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="dicname" label="字典名称" width="width" align="center">
                </el-table-column>
                <el-table-column prop="code" label="字典编码" width="width" align="center">
                </el-table-column>
                <el-table-column prop="desc" label="描述" width="width" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" @click="detail(scope.$index, scope.row)">字典配置</el-button>
                        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="query.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>

        <el-dialog :visible.sync="editVisible" width="50%" :closeOnClickModal="false" @close="cancle">
            <AddDictionary v-if="isAdd"></AddDictionary>
            <EditDictionary v-if="isEdit" :id="id"></EditDictionary>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <el-drawer title="字典列表" :visible.sync="drawer" size="60%" :direction="direction" :before-close="handleClose">
            <DictionaryList v-if="drawer" :id="id"></DictionaryList>
        </el-drawer>



    </div>
</template>

<script>
import { selectAllDict1, selectDict1Byname, addDict1, updateDict1, deleteDictById } from '@/api/systemManager';
import AddDictionary from './dialog/AddDictionary';
import EditDictionary from './dialog/EditDictionary'
import DictionaryList from './dialog/DictionaryList'
import bus from '@/components/common/bus';
export default {
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 2,
                dicname: '',
            },

            tableData: [],
            pageTotal: 0,
            editVisible: false, //控制弹窗
            isAdd: false,
            isEdit: false,
            form: {},
            id: '',
            drawer: false,
            direction: 'rtl',

        };
    },
    mounted() {
        this.getData()
        //注册事件 拿到添加组件的数据
        bus.$on('getForm', (val) => {
            this.form = val
        })

    },
    components: {
        AddDictionary,
        EditDictionary,
        DictionaryList
    },
    methods: {
        //获取数据信息
        async getData() {
            let result = await selectAllDict1(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
            }
        },
        //搜索
        async search() {
            this.query.pageNum = 1
            let result = await selectDict1Byname(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
                this.$message({ message: result.msg, type: 'success' })
            }else{
                this.$message({ message: result.msg, type: 'error' })
            }
        },
        //页码改变时
        handlePageChange(val) {
            this.query.pageNum = val

            this.getData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.query.pageSize = val
            this.getData();
        },
        //关闭弹窗
        cancle() {
            this.editVisible = false
            this.isAdd = false
            this.isEdit = false
        },
        //保存编辑
        async saveEdit() {
            //添加
            if (this.isAdd) {
                let result = await addDict1(this.form)
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                }
            }
            //编辑
            if (this.isEdit) {
                let result = await updateDict1(this.form)
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                }
            }
            this.cancle()
        },
        //添加
        handleAdd() {
            this.editVisible = true
            this.isAdd = true
        },
        //编辑
        handleEdit(index, row) {
            this.editVisible = true
            this.isEdit = true
            this.id = row.id
        },
        //删除
        handleDelete(index, rows) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(async () => {
                let params = {
                    id: rows.id
                }
                let result = await deleteDictById(params)
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                }
            })
        },
        //字典配置
        detail(index, row) {
            this.drawer = true
            this.id = row.id
        },
        //关闭抽屉
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        clear() {
            this.query.dicname = ''
            this.search()
        }
    }
};
</script>

<style   scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.mr10 {
    margin-right: 10px;
}
</style>
